<template>
  <div>
    <div class="container">
      <el-link href="/#/register" target="_blank" type="primary" :icon="HomeFilled">新员工注册</el-link>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column v-for="(value, index) in columns" :key="index" :prop="value.prop" :label="value.label"
          align="center"></el-table-column>

        <el-table-column label="操作" width="280" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" :icon="Edit" @click="handleEdit(scope.$index, scope.row)"
              v-permiss="15">
              编辑
            </el-button>
            <el-button type="danger" size="small" :icon="Delete" @click="handleDelete(scope.$index)" v-permiss="16">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="visible" width="500px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
      <HREdit :data="rowData" :edit="idEdit" :update="updateData" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit,HomeFilled } from "@element-plus/icons-vue";
import HREdit from "../components/HREdit.vue";
import axios from "../utils/request";

interface TableItem {
  id: number;
  name: string;
  birth_date: string;
  chushi_id: number;
  rank_id: number;
  level_id: number;
  role: string;
  chushi_name: string;
  rank_name: string;
  level_name: string;
}

const columns = [
  { label: "人员编号", prop: "id" },
  { label: "人员姓名", prop: "name" },
  { label: "出生日期", prop: "birth_date" },
  { label: "处室", prop: "chushi_name" },
  { label: "职级", prop: "rank_name" },
  { label: "级别", prop: "level_name" },
  { label: "角色", prop: "role" },
];

const tableData = ref<TableItem[]>([]);


const getData = async () => {
  const res = await axios.get("/person/viewsets/");
  const persons = res.data.results as TableItem[];

  axios.get("/chushi/api/name")
    .then(res => res.data.results)
    .then(chushi => {
      const nameArray = chushi.map((item: { name: any; }) => item.name);

      tableData.value = tableData.value.map(({ ...obj }) => {
        return {
          ...obj,
          chushi_name: nameArray[obj.chushi_id - 1]
        }
      })

    })
  axios.get("/rank/api/name")
    .then(res => res.data.results)
    .then(rank => {
      const nameArray = rank.map((item: { name: any; }) => item.name);

      tableData.value = tableData.value.map(({ ...obj }) => {
        return {
          ...obj,
          rank_name: nameArray[obj.rank_id - 1]
        }
      })
    })
  axios.get("/level/api/name")
    .then(res => res.data.results)
    .then(level => {
      const nameArray = level.map((item: { name: any; }) => item.name);

      tableData.value = tableData.value.map(({ ...obj }) => {
        return {
          ...obj,
          level_name: nameArray[obj.level_id - 1]
        }
      })

    })

  // for (const person of persons) {
  //   const chushiResponse = await axios.get("/chushi/api/name", {
  //     params: { id: person.chushi_id }
  //   });
  //   console.log("chushi--------");
  //   person.chushi_name = chushiResponse.data.name;
  //   const rankResponse = await axios.get("/rank/api/name/", {
  //     params: { id: person.rank_id }
  //   });
  //   person.rank_name = rankResponse.data.name;
  //   const levelResponse = await axios.get("/level/api/name/", {
  //     params: { id: person.level_id }
  //   });
  //   person.level_name = levelResponse.data.name;
  // }
  console.log(
    localStorage.getItem("role") === "admin",
    localStorage.getItem("ms_username")
  );

  tableData.value = persons;

};


getData();
const rowData = ref({});
let idx: number = -1;
let visible = ref(false);
let idEdit = ref(false);
const handleEdit = (index: number, row: TableItem) => {
  idx = index;
  rowData.value = row;
  idEdit.value = true;
  visible.value = true;
};
const handleDelete = (index: number) => {
  // 二次确认删除
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
  })
    .then(() => {
      ElMessage.success("删除成功");
      tableData.value.splice(index, 1);
    })
    .catch(() => { });
};

const updateData = (row: TableItem) => {
  idEdit.value ? (tableData.value[idx] = row) : tableData.value.unshift(row);

  console.log(row)
  axios
    .put(`/person/viewsets/${row.id}/`, row)
    .then((res) => res.data)
    .then((data) => console.log("Put---------------", data));
  closeDialog();
};

const closeDialog = () => {
  visible.value = false;
  idEdit.value = false;
};
</script>

<style scoped></style>
